<template>
  <div>
    <a-modal
      v-model="visible"
      title="选择加工设备"
      @ok="handleOk"
      :destroyOnClose="true"
      @onCancel="handleCancel"
      width="calc(1500/1920*100vw)"
    >
      <a-row :gutter="20">
        <a-col :span="7">
          <ul class="ul_left">
            <li
              v-for="(item, index) in list"
              @click="handleTabSelect(index)"
              :class="{ active: active === index }"
              :key="index"
            >
              <span>{{ item.groupname }}</span>
              <span>{{ item.checkLength }}/{{ item.MacSNs.length }}</span>
            </li>
          </ul>
        </a-col>
        <a-col :span="17" class="alarmStyle">
          <ul class="ul_right ">
            <li
              v-for="(element, index) in equipmentList"
              :key="index"
              @click="handleSelect(index)"
              :class="{ listActive: element.show }"
            >
              <div class="li_box">
                <img :src="$pictureUrl + element.url" alt="" />
                <div class="equipment_box">
                  <div style="color:#d65b4a">设备编号：{{ element.macnum }}</div>
                  <div>设备型号：{{ element.mactype }}</div>
                  <div>设备名称：{{ element.macname }}</div>
                  <div>加工件数：{{ element.count }}</div>
                </div>
                <a-icon type="check" v-if="element.show" class="icon_gou" />
                <div class="triangle" v-if="element.show"></div>
              </div>
            </li>
          </ul>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false, // 弹框状态
      active: 0, // 左侧tab选中
      list: [], // 左侧的tab数组
      equipmentList: [], // 右边的设备数组
      checkList: [], //选中的数组
      macSNs: '', //选中的设备名称
      checkIndex: 0, // 选中的索引
    };
  },
  methods: {
    // tab选中回调
    handleTabSelect(index) {
      this.active = index;
      this.equipmentList = this.list[index].MacSNs;
    },
    // 列表选中回调
    handleSelect(index) {
      this.equipmentList[index].show = !this.equipmentList[index].show;
      const list = this.equipmentList.filter((item) => {
        return item.show === true;
      });
      this.list[this.active].checkLength = list.length;
    },
    // 弹框显示隐藏
    showModal() {
      this.visible = true;
    },
    // 保存回调
    handleOk() {
      this.list.forEach((item) => {
        item.MacSNs.forEach((element) => {
          if (element.show === true) {
            this.checkList.push(element.macsn);
          }
        });
      });
      this.macSNs = this.checkList.toString();
      this.$emit('macSNs', this.macSNs, this.checkIndex);
      this.macSNs = '';
      this.checkList = [];
      this.list = [];
      this.visible = false;
    },
    // 关闭回调
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="less">
.ul_left {
  border: 1px solid #ccc;
  padding: 10px 10px 0 10px;
  min-height: 100px;
  cursor: pointer;
  li {
    width: 100%;
    height: 30px;
    padding: 5px;
    margin: 0 0 10px 0;
    display: flex;
    justify-content: space-between;
  }
}
.ul_right {
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  li {
    color: #333;
    width: 45%;
    margin: 0 10px 10px 10px;
    border: 1px solid #ccc;
    padding: 10px;
    .li_box {
      display: flex;
      align-content: center;
    }
  }
  img {
    width: calc(180 / 1920 * 100vw);
    height: calc(150 / 1080 * 100vh);
  }
  .equipment_box {
    div {
      margin: 5px 10px;
    }
  }
}
.active {
  color: #fff;
  background: #3599ff;
}
.listActive {
  border: 1px solid #3599ff !important;
}

.alarmStyle {
  cursor: pointer;
  ul {
    overflow: hidden;
    li {
      position: relative;
      .liicon {
        position: absolute;
        top: -1px;
        right: -1px;
      }
    }
  }
}
.triangle {
  width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
  height: 0px;
  border-top: 24px solid #3599ff;
  border-left: 24px solid transparent;
  position: absolute;
  right: 0;
  top: 0;
}
.icon_gou {
  position: absolute;
  right: 3px;
  top: 3px;
  font-size: 10px;
  color: #fff;
  z-index: 999;
}
</style>
